import React from "react";
import { useSelector, useDispatch } from "react-redux";

const App = () => {
  // 如果仓库数据用了immutable，组件里面需要使用get方法来获取值
  const count = useSelector((state) => {
    console.log(state);
    return state.getIn(["counter", "count"]);
  });
  const name = useSelector((state) => state.getIn(["counter", "name"]));
  const dispatch = useDispatch();

  return (
    <>
      <h2>redux+immutable</h2>
      <button onClick={() => dispatch({ type: "minus" })}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: "add" })}>+</button>

      <hr />

      <div>name: {name}</div>
      <button onClick={() => dispatch({ type: "changeName", name: "jerry" })}>
        btn
      </button>
    </>
  );
};

export default App;
